<template>
	<view class="catalog-layout">
		<z-paging ref="paging" v-model="dataList" @query="queryList" class="paging" :fixed="false" :auto='false'>
			<template #top>
				<view class="catalog-top">
					<video id="catalog_video" :src="curVideSrc" controls class="catalog-video"></video>
					<view class="catalog-tips">课程导学</view>
				</view>
			</template>
			<view v-for="(item,index) in dataList" :key="index">
				<view class="catalog-container">
					<view class="catalog-item" @click="changeVideo(item.videoUrl)">
						<view class="catalog-item-serial"> {{item.chapterCode}} </view>
						<view class="catalog-item-middle">
							<view class="catalog-item-middle-name"> {{item.chapterName}} </view>
							<view class="catalog-item-middle-length"> 时长：{{dateStringFrom(item.videoLenght)}}
							</view>
						</view>
						<view v-if="item.lock" class="catalog-item-end-lock">
							<uni-icons v-if="item.lock" type="cart-filled" style="display: flex;"></uni-icons>
						</view>
						<view v-else class="catalog-item-end-try">
							试看
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	/**
	 * @property {Number} tabIndex 当前页面属于tabs的那个下标下
	 * @property {Number} current 当前的tabs的下标
	 */
	import {
		nextTick,
		ref,
		watch
	} from 'vue';

	const curVideSrc = ref("")

	const paging = ref(null)

	const dataList = ref([])

	const props = defineProps({
		info: {
			type: Object,
			default: null
		},
		tabIndex: {
			type: Number,
			default: 0
		},
		current: {
			type: Number,
			default: null
		}
	})

	// 首次加载
	const firstLoaded = ref(false)

	watch(() => props.current, (nv, ov) => {
		if (nv == props.tabIndex) {
			if (!firstLoaded.value) {
				nextTick(() => {
					setTimeout(() => {
						paging.value.reload(true)
						firstLoaded.value = true
					}, 100)
				})
			}
		} else {
			const videoRef = uni.createVideoContext('catalog_video')
			videoRef.pause()
		}
	}, {
		immediate: true
	})

	function play() {
		setTimeout(() => {
			const videoRef = uni.createVideoContext('catalog_video')
			videoRef.play()
		}, 100)
	}

	const db = uniCloud.importObject("courseChapterObj", {
		customUI: true
	});

	const queryList = (pageNo, pageSize) => {
		db.getList(props.info._id, (pageNo - 1) * pageSize, pageSize).then(res => {
			paging.value.complete(res.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	const dateStringFrom = (length) => {
		let hours = Math.floor(length / 3600)
		let minutes = Math.floor(length % 3600 / 60)
		let seconds = length % 60

		// 如果时长小于1小时，显示 mm:ss 格式
		if (hours > 0) {
			// 如果时长大于等于1小时，显示 HH:mm:ss 格式
			return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
		} else {
			// 如果时长小于1小时，显示 mm:ss 格式
			return `${padZero(minutes)}:${padZero(seconds)}`;
		}
	}

	// 补零函数，用于确保时间是两位数
	function padZero(num) {
		return num < 10 ? '0' + num : num;
	}

	function changeVideo(videoUrl) {
		curVideSrc.value = videoUrl;
		play();
	}
</script>

<style lang="scss" scoped>
	.catalog-layout {
		height: 100%;

		.catalog-top {
			display: flex;
			flex-direction: column;

			.catalog-video {
				width: 100%;
				aspect-ratio: 16 / 9;
			}

			.catalog-tips {
				height: 80rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: $me-color-gray-1;
			}
		}

		.catalog-container {
			margin-top: 20rpx;
			padding: 0 20rpx;

			.catalog-item {
				padding: 20rpx 20rpx;
				display: flex;
				background-color: $me-color-background;
				border-radius: 8rpx;
				position: relative;

				.catalog-item-serial {
					display: flex;
					width: 70rpx;
					align-items: center;
					font-size: 28rpx;
					color: $me-color-gray-6;
				}

				.catalog-item-middle {
					flex: 1;
					margin-right: 80rpx;
					display: flex;
					flex-direction: column;

					.catalog-item-middle-name {
						font-size: 28rpx;
						color: $me-color-gray-1;
					}

					.catalog-item-middle-length {
						margin-top: 10rpx;
						font-size: 20rpx;
						color: $me-color-gray-6;
					}
				}

				.catalog-item-end-lock {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					background-color: $me-color-gray-6;
					border-radius: 0 8rpx;
					width: 80rpx;
					display: flex;
					align-items: center;
					height: 35rpx;
					justify-content: center;
				}

				.catalog-item-end-try {
					position: absolute;
					right: 0rpx;
					top: 0;
					background-color: $me-color-blue;
					font-size: 20rpx;
					height: 35rpx;
					border-radius: 0 8rpx;
					width: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
				}
			}
		}
	}
</style>